<template>
    <el-card class="check-index">
        <!-- search -->
        <el-form label-position="left" label-width="70px" :model="form" class="check-index__search">
            <div class="flex justify-between">
                <el-form-item label="关键词" class="w-full">
                    <el-input placeholder="搜索关键词" v-model="form.kw" class="w-full"></el-input>
                </el-form-item>

                <el-form-item label="频道筛选" class="w-full px-4">
                    <el-cascader
                        clearable
                        class="w-full"
                        v-model="category"
                        @change="handleCategory"
                        :options="typeOptions"
                        placeholder="请选择类目"
                        :show-all-levels="false"
                        :props="{value: 'id', label: 'text', children: 'nodes'}">
                    </el-cascader>
                </el-form-item>

                <div style="width: 230px" class="flex-no-shrink">
                    <el-button class="btn-primary" @click="fetchData('desc', true)">搜索</el-button>
                    <el-button class="btn-primary" @click="reset">重置</el-button>
                </div>
            </div>

            <div class="flex justify-between">
                <el-form-item label="作者" class="w-full">
                    <el-input placeholder="搜索作者" v-model="form.creatorName" class="w-full"></el-input>
                </el-form-item>

                <el-form-item label="日期" class="w-full px-4">
                    <div class="flex date-picker">
                        <el-date-picker
                            v-model="form.startTime"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="开始日期">
                        </el-date-picker>
                        <span class="px-2 flex-no-shrink">到</span>
                        <el-date-picker
                            v-model="form.endTime"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="开始日期">
                        </el-date-picker>
                    </div>
                </el-form-item>

                <div style="width: 230px" class="flex-no-shrink">
                    <!-- <el-button class="btn-primary" @click="onBatch(true)">批量{{ $route.path.includes('wait') ? '通过' : '归档' }}</el-button> -->
                    <el-button v-if="$route.path.includes('wait')" class="btn-primary" @click="onBatch(true)">批量通过</el-button>
                    <el-button class="btn-primary bg-error" v-if="$route.path.includes('wait')" @click="onBatch(false)">批量不通过</el-button>
                </div>
            </div>
        </el-form>

        <!-- list -->
        <list
            v-loading="loading"
            v-model="update"
            @sortBy="fetchData($event)"
            @emitSelected="getSelected"
            :source="lists"
            :check="true"
            :cancel="$route.path.includes('finish')"
            :change-type="true"
            :time="$route.path.includes('check')"
            :past="$route.path.includes('wait')"
            :popular="$route.path.includes('finish')">
        </list>

        <!-- pagination -->
        <div class="text-center pt-6" v-if="lists && lists.length">
            <el-pagination
                @current-change="fetchData('desc')"
                :current-page.sync="form.page"
                :page-size="form.pagesize"
                layout="prev, pager, next"
                :total="form.total">
            </el-pagination>
        </div>
    </el-card>
</template>

<script>
    import {Form, FormItem, Pagination, DatePicker, Cascader} from 'element-ui';
    import List from '../../components/widget/List';
    import {getCategorise} from '../../config/Cache';

    export default {
        components: {
            List,
            ElForm: Form,
            ElFormItem: FormItem,
            ElDatePicker: DatePicker,
            ElPagination: Pagination,
            ElCascader: Cascader
        },
        data() {
            return {
                form: null,
                lists: [],
                typeOptions: [],
                selected: '',
                update: false,
                loading: false,
                category: []
            };
        },
        watch: {
            '$route'(val, oldval) {
                this.createForm();
                this.fetchData('desc');
            },
            update(val) {
                if (val) this.fetchData('desc');
            }
        },
        methods: {
            fetchData(sortBy = 'desc', isSearch = false) {
                this.loading = true;

                // let data = {};
                // Object.entries(this.form).filter(el => el[1] && el[0] !== 'total').map(ele => data[ele[0]] = ele[1]);

                let status = this.$route.name.split('.')[1];
                switch (status) {
                    case 'Finish':
                        this.form.type = 2;
                        break;
                    case 'Wait':
                        this.form.type = 1;
                        break;
                };

                this.form.sf = 'createTime';
                this.form.so = sortBy.includes('asc') ? 'asc' : 'desc';

                if (isSearch) this.form.page = 1;

                API.get('manage/channel', {params: this.form})
                    .then(res => {
                        this.lists = res.rows;
                        this.form.total = res.total;
                    })
                    .finally(() => {
                        this.update = false;
                        this.loading = false;
                    });
            },
            async fetchCategory() {
                const categories = await getCategorise('cascader');
                console.log(categories)
                API.get('user/channel/list',).then(res=>{
                    console.log(res)
                    this.typeOptions = res.map(item=>{
                        item.text = item.cnname
                        return item
                    })
                })
                // this.typeOptions = categories.map(el => {
                //     if (!el.nodes) el.disabled = true;
                //     return el;
                // });
                // console.log(this.typeOptions)
                this.options = await getCategorise();
            },
            /**
             * [onBatch description]
             * @param  {Boolean} type   [类型： true: 通过, false: 不通过]
             * @param  {Boolean} hidden [是否归档]
             */
            onBatch(type = true, hidden = false) {
                if (!this.selected.length) {
                    Ele.$message.error('请选择应用');
                    return null;
                }
                if (type && !this.$route.path.includes('wait')) hidden = true;

                let data = {
                    //audit: hidden ? 4 : (type ? 3 : 2),
                    ids: this.selected
                };
                let _url = hidden ? '' : (type ? 'application/channel/apply/batch/aggree' : 'application/channel/apply/batch/refuse')
                API.post(_url, data).then(res => {
                    Ele.$message.success('批量操作成功');
                    this.fetchData('desc', true);
                });
            },
            getSelected(val) {
                this.selected = val;
            },
            handleCategory(val) {
                this.form.acatid = val.length ? val[val.length - 1] : '';
            },
            createForm() {
                this.form = {
                    kw: '',
                    acatid: '',
                    creatorName: '',
                    startTime: '',
                    endTime: '',
                    audit: 0,
                    total: 0,
                    page: 1,
                    pagesize: 10
                };
                this.category = [];
            },
            reset() {
                this.createForm();
                this.fetchData('desc');
            }
        },
        async created() {
            await this.createForm();
            await this.fetchData('desc');
            this.fetchCategory();
        },
    };
</script>

<style lang="scss">
    .check-index {
        .date-picker {
            .el-date-editor.el-input {
                width: auto;
            }
        }
    }
</style>
